<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>剪头函数this</title>
</head>
<body>
  <script>
    /**
     * 箭头函数的this指向
    */
   const goods = {
      name: '土豆',
      price: '1.5',
      count: 2,
      total1 () {
        // 只想当前作用域
        console.log('total1', this); // goods对象
      },
      total2: () => {
        // 剪头函数的this会穿透当前作用域goods，指向其父级作用域
        console.log('total2', this); // Window对象
      },
      total3 () {
        Array.from(this.name).forEach(()=> {
          // 穿透当前作用域指向父级作用域goods
          console.log('total3', this); // goods
        })
      },
      total4() {
        console.log('outTotal4', this); // goods作用域
        Array.from(this.name).forEach(function() {
          //回调函数变成了独立作用域指向了Window
          console.log('total4', this); // Window
        })
      },
   }
   goods.total1();
   goods.total2();
   goods.total3();
   goods.total4();
  </script>
</body>
</html>